<template>
  <el-tabs v-model="tabsAction">
    <el-tab-pane v-for="(item, index) in list" :key="index" v-loading="listLoading" :name="item.tab_name" :label="item.title">
      <div class="app-container">
        <el-form ref="form">
          <el-form-item v-for="(row, key) in item.data" :key="row.name" :label="row.title">
            <span v-if="row.description!==''" style="font-size: 14px;color: #c8c9cc;">({{ row.description }})</span>
            <el-input v-if="row.type==='text'" v-model="row.value" placeholder="请输入内容" :name="row.name" />
            <el-input v-if="row.type==='textarea'" v-model="row.value" placeholder="请输入内容" type="textarea" />
            <el-radio-group v-if="row.type==='radio'" v-model="row.value">
              <el-radio v-for="options in row.options" :key="options.value" :label="options.value">{{ options.key }}</el-radio>
            </el-radio-group>
            <el-upload
              v-if="row.type==='image'"
              class="avatar-uploader"
              :headers="headers"
              :action="uploadUrl"
              :data="{index: index,key: key}"
              :show-file-list="false"
              :multiple="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="row.value" :src="row.value" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item style="text-align: center;">
            <el-button v-permission="'config@save'" type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { fetchList, save } from '@/api/config'
import permission from '@/directive/permission'
export default {
  name: 'Basic',
  directives: { permission },
  data() {
    return {
      tabsAction: 'base',
      listLoading: true,
      list: null,
      width: '180px',
      imageUrl: '',
      uploadUrl: process.env.VUE_APP_BASE_API + '/admin/config/upload',
      headers: {
        'Authorization': 'Bearer ' + this.$store.getters.token
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.list[res.data.index].data[res.data.key].value = res.data.url
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data
        console.log(this.list)
        this.listLoading = false
      })
    },
    submit() {
      this.listLoading = true
      save(this.list).then(() => {
        this.listLoading = false
        this.$notify({
          title: 'Success',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style>
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {
   border-color: #409EFF;
 }
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
   width: 80px;
   height: 80px;
   line-height: 80px;
   text-align: center;
 }
 .avatar {
   width: 80px;
   height: 80px;
   display: block;
 }
</style>
